<!DOCTYPE>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>客户信息</title>
    <link rel="stylesheet" href="/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/laypage.css">

    <script src="/js/vue/vue.min.js"></script>
    <script src="/js/jquery/jquery.min.js"></script>
    <script src="/js/laypage/laypage.js" charset="utf-8"></script>
    <script src="/js/layer/layer.js" charset="utf-8"></script>
    <style>
        .header_search{
            float: left;
            padding: 4px 0 0 0px;
        }
        .header_search .search{
            width: 270px;
            height: 25px;
            font-size: 14px;
            text-indent: 10px;
            border: 1px solid #fec200;
        }

        #searchBox ul{
            border-bottom: 1px solid #fec200;
            border-left: 1px solid #fec200;
            border-right: 1px solid #fec200;
        }
        #searchBox ul li {
            width: 257px;
            height: 30px;
            background: #ffffff;
            font-size: 15px;
            padding-left: 13px;
            color: #000000;
            line-height:30px;
        }
        #searchBox ul li a{
            text-decoration: none;
            color: #000000;
        }
        #searchBox ul li a:hover{
            text-decoration: none;
            color: #000000;
        }
    </style>
</head>
<body>
<section id="container">
<#include "sider.ftl">  <#--引入头部和导航栏-->
    <section id="main-content">
        <section class="wrapper">
            <div class="table-agile-info">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        客户信息
                    </div>
                    <div id="app">
                        <form class="form-inline bg-warning" role="form">
                            <div class="header_search">
                                <input type="text" name="keyword" id="keyword" class="search" placeholder="用户名或身份证号">
                                <div id="searchBox"></div>
                            </div>
                            <button type="button" id="findUser" class="btn btn-success">查询客户</button>
                        </form>
                        <div class="table-responsive">
                            <table class="table">
                                <thead>
                                <tr class="success">
                                    <td>序号</td>
                                    <td>客户姓名</td>
                                    <td>客户电话</td>
                                    <td>客户身份证号</td>
                                    <td>客户住址</td>
                                    <td>客户VIP等级</td>
                                    <td>操作</td>
                                </tr>
                                </thead>
                                <tbody>
                                <tr class="active" v-for="(item,index) in result"  >
                                    <td>{{index+1}}</td>
                                    <td>{{item.sname}}</td>
                                    <td>{{item.sphone}}</td>
                                    <td><a href="#" @click="getOrder(item.scardId)">{{item.scardId}}</a></td>
                                    <td>{{item.saddress}}</td>
                                    <td v-if="item.svip=='0'">普通客户</td>
                                    <td v-else-if="item.svip=='1'">青铜客户</td>
                                    <td v-else-if="item.svip=='2'">白银用户</td>
                                    <td v-else-if="item.svip=='3'">黄金用户</td>
                                    <td v-else="item.svip=='4'">钻石用户</td>
                                    <td><a href="#" @click="editEvent(item.suId)">编辑</a>|<a href="#" @click="updateEvent(item.suId)">删除</a></td>
                                </tr>
                                </tbody>
                                <tr>
                                    <td colspan="3" ><div id="pagenav" ></div></td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
        </section>
    <#include "/foot.html"><#--引入底部-->
    </section>
</section>
</body>
</html>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            result: []
        }
    });


    //查询客户数据
    var getUserPageList = function (curr) {
        $.ajax({
            type: 'POST',
            url: '/user/getPageUser.do',
            dataType: 'json',
            timeout:3000,
            data: {
                pageSize: 3,
                pageNum: curr || 1,
                keyword:$("#keyword").val()
            },
            success: function (msg) {
                app.result = msg.page;
                laypage({
                    cont: 'pagenav',//分页容器
                    pages: msg.totalPage,//总页数
                    skin: '#CD00CD',
                    first: '首页',
                    last: '末页',
                    curr: curr || 1,
                    jump: function (obj, first) {
                        if (!first) {
                            getUserPageList(obj.curr);

                        }
                    }
                });
            },
        error:function(){
                alert("服务器忙,请不要说脏话,理论上大家都是文明人");

        }
        });
    }
    getUserPageList();

    $("#findUser").click(function () {
        getUserPageList();

    });

    $("#addUserBtn").click(function () {
        layer.open({
            type: 2,
            title: '添加客户',
            fix: true,
            maxmin: true,
            shadeClose: true,
            area: ['1100px', '600px'],
            content: '/user_add.html',
            end: function () {
                getUserPageList();
            }
        });
    });

    var editEvent = function (id) {
        layer.open({
            type: 2,
            title: '编辑',
            fix: true,
            maxmin: true,
            shadeClose: true,
            /*定义修改窗口大小*/
            area: ['800px', '600px'],
            content: '/user/user_toEdit.do?suId=' + id,
            end: function () {
                getUserPageList();
            }
        });
    }

    var updateEvent=function (id) {
        layer.confirm('确认删除吗?',{
            btn:['是','否']
        },function () {
            $.ajax({
                type:'GET',
                dataType:'json',
                url:'/user/user_upUserStatus.do',
                data:{
                    suId:id
                },
                success:function(msg){
                    getUserPageList();
                    layer.msg('成功删除',{icon:6});
                }
            });
        },function(){

        });
    }

    /*================================*/

    function getOrder(id){
        $.ajax({
            url:"/user/user_order.do",
            dataType:"json",
            type:"post",
            data:{
                scardId:id
            },
            success:function (data) {
               $.each(data,function (index,obj) {
                    layer.open({
                        type: 2,
                        title: '保单信息',
                        fix: true,
                        maxmin: true,
                        shadeClose: false,
                        area: ['1100px', '900px'],
                        content: '/order/toQueryOrderDetail/' +obj.oid + '.do',
                        end: function () {
                            getUserPageList(curr);
                        }
                    });
               });
            }
        });
    };
</script>